<template>
     <template v-for="item in menu">
        <el-sub-menu  v-if="item.children &&item.children.length" :index="item.index" :key="item.index">
            <template #title>
                <component :is="`el-icon-${toLine(item.icon)}`" v-if="item.icon" ></component>
                <span>{{item.name}}</span>
            </template>
            <item :menu="item.children" ></item>
        </el-sub-menu>
        <el-menu-item :index="item.index" v-if="!item.children || !item.children.length">
            <component :is="`el-icon-${toLine(item.icon)}`" v-if="item.icon" ></component>
            <span>{{ item.name }}</span>
        </el-menu-item>
    </template>
</template>

<script setup lang="ts">
    import { MenuItem } from '../menu/type'
    import { toLine } from '../../utils/index'
    let props = defineProps({
        menu: {
            type: Array as PropType<MenuItem[]>,
            default: () => [],
        }
    })
</script>

<style scoped>
svg{
    margin-right: 4px;
}
</style>
